@charset "utf-8";
@function l($lun){
    @return $lun/640*100%
}

//顶部模版
.web{
    .hea{
        height: 20%;
        background: url(../img/head_bg.png) no-repeat center/cover;
        width: 100%;
        position: relative;
        .news{
            float: left;
            width: 8%;
            margin-left: 2%;
            margin-top: 2%;
        }
        .on_off{
             float: right;
            .music_1{
                width: 8%;
                position: absolute;
                top: 0;
                right: 0;
                transform: translate(-32%,25%);
                }
            .music{
                width: 75%;
                margin-right: 2%;
                margin-top: 21%;
//              animation: solo 4s infinite linear;
             }
          }
       
       
    }
}


//wi4
@media screen and (max-height:416px){
    .homepage{
        .snow1{top: 60px;}
        .snow2{top: 130px;}
        .snow3{top: 220px;}
        .snow4{top: 75px;width: l(70);}
        .star{top: 87px;width: l(80);left: l(275);}
        .tree{margin-top: 119px;width: l(230);}
        .title1{top: 299px;width: l(237);left: l(200);}
        .title2{top: 326px;width:l(172);left: l(230)}
        .decorate{top: 260px; width: l(358);left: l(140);}
        .bingo{top:353px;width: l(128);left: l(256);}
        .tie{top:343px;width: l(320);left: l(160);}
        .draw{top: 375px;left: l(160);}
        .draw img{margin-top: 1px;width: 10px;}
        .draw p{font-size: 12px;}
    }
    .web .hea .on_off .music{width: 65%;margin-top: 15%;}
    .web .explain{width: 270px;height: 320px;}
    .web .sec .step1 .pic_1{padding-top: 25px;}
    .web .sec .step1 .pic_2 img{width: 38%;}
    .web .sec .step1 .pic_3 img{width: 65%;}
    .web .sec .step1 .pic_2{padding-top: 20px;}
    .web .sec .step1 .pic_3{padding-top: 20px;}
    .web .sec .step2 .relation2{padding-top: 30px;}
    .web .sec .step2 .relation2 ul li{line-height: 100%;font-size: 12px;}
    .web .sec .step2 .relation2 ul li:last-child input{margin-top: 5px;}
    .web .sec .step2 .relation3{padding-top: 30px;}
    .web .sec .step2 .relation3 img{width: 68%;}
    .web .sec .step3 .rela1 {padding-top: 15px;}
    .web .sec .step3 .rela2{padding-top: 0;}
    .web .sec .step3 .rela2 ul{margin-top: 12px;}
    .web .sec .step3 .rela2 ul li{font-size: 12px;}
    .web .sec .step3 .rela2 ul li:last-child img {margin-top: 7px;}
    .web .sec .step3 .rela3{padding-top: 33px;}
    
}
//iphone4
@media (min-height:417px) and (max-height:480px){
    .homepage{
        .logo{top: 10px;}
        .snow1{top: 50px;}
        .snow2{top: 130px;}
        .snow3{top: 220px;}
        .snow4{top: 75px;}
        .star{top: 72px;}
        .tree{margin-top: 119px;}
        .title1{top: 320px;}
        .title2{top: 364px;}
        .decorate{top: 270px;}
        .bingo{top:403px}
        .draw{top: 431px;left: l(160);}
        .draw img{margin-top: 5px;width: 15px;}
        .draw p{font-size: 16px;}
    }
    .web{
        .hea .on_off .music{width: 64%;margin-top: 14%;}
        .explain{height: 339px; width: 265px;}
        .sec .step1 .pic_2 img{width: 35%;}
        .sec .step1 .pic_3{padding-top: 30px;}
        .sec .step2 .relation2{padding-top: 15px;}
        .sec .step2 .relation2 ul li{line-height: 120%;font-size: 12px;}
        .sec .step2 .relation3 {padding-top: 35px;}
        .sec .step2 .relation3 img{width: 65%;}
        .sec .step3 .rela2 ul li {font-size: 12px;}
        .sec .step2 .relation3 img{margin-top: 5px;}
        .web .sec .step3 .rela3 img{width: 55%;margin-top: 13px;}
        .sec .step3 .rela2 ul li:last-child img{width: 90%;margin-left: 6px;margin-top: 2px;}
        .sec .step3 .rela3{padding-top: 42px;}
    }
}
//wi5
@media (min-height:481px) and (max-height:504px){
    .homepage{
        .logo{top: 10px;}
        .snow1{top: 50px;}
        .snow2{top: 130px;}
        .snow3{top: 220px;}
        .snow4{top: 75px; width: l(60);}
        .star{top: 72px;}
        .tree{margin-top: 119px;}
        .title1{top: 320px;}
        .title2{top: 364px;}
        .decorate{top: 287px;}
        .bingo{top:403px}
        .tie{top:396px;width: l(473);left: l(76);}
        .draw{top: 450px;left: l(160);}
        .draw img{margin-top: 5px;width: 15px;}
        .draw p{font-size: 19px;}
    }
    .web .hea .on_off .music{width: 66%;margin-top: 15%;}
    .web .hea .on_off .music_1{transform: translate(-53%,25%);}
    .web .explain{width: 280px;height: 350px;}
    .web .sec .step1 .pic_1{padding-top: 35px;}
    .web .sec .step1 .pic_2 img{width: 40%;}
    .web .sec .step1 .pic_3{padding-top: 35px;}
    .web .sec .step2 .relation2{padding-top: 5px;height: 45%;}
    .web .sec .step2 .relation2 ul li{line-height: 100%;font-size: 13px;}
    .web .sec .step2 .relation3{padding-top: 25px;}
    .web .sec .step2 .relation3 img{width: 75%;}
    .web .sec .step3 .rela2 ul{margin-top: 4px;}
    .web .sec .step3 .rela2 ul li:last-child img{margin-top: 10px;}
    .web .sec .step3 .rela3{padding-top: 43px;}
    .web .sec .step2{margin-top: 1%;}
}
//iphone5
@media (min-height:505px) and (max-height:568px){
    .homepage{
        .logo{top: 19px;}
        .snow1{top: 60px;}
        .snow2{top: 120px;}
        .snow3{top: 240px;}
        .snow4{top: 85px;}
        .tie{top: 448px;}
        .tree{margin-top: 142px;}
        .title1{top: 377px;}
        .title2{top: 422px;}
        .decorate{top: 333px;}
        .bingo{top:462px}
        .draw{top: 505px;left: l(160);}
        .draw img{margin-top: 15px;width: 15px;}
        .draw p{font-size: 20px;}
    }
    .web{
        .hea .on_off .music{width: 67%;margin-top: 15%;}
        .explain{width: 271px;height: 378px;}
        .sec .step1 .pic_2 img{width: 42%;}
        .sec .step2 .relation2 ul li{line-height: 120%;}
        .sec .step3 .rela2 ul li:last-child img {margin-top: 13px;}
        .sec .step3 .rela3 img{margin-top: 0;width: 70%;}
    }
}
//wi6
@media (min-height:569px) and (max-height:603px){
    .homepage{
        .logo{top: 19px;}
        .snow1{top: 60px;}
        .snow2{top: 120px;}
        .snow3{top: 240px;}
        .snow4{top: 85px; width: l(70);}
        .tie{top: 475px;}
        .tree{margin-top: 148px;}
        .title1{top: 387px;}
        .title2{top: 440px;}
        .decorate{top: 345px;}
        .bingo{top:490px}
        .draw{top: 535px;left: l(160);}
        .draw img{margin-top: 15px;width: 20px;}
        .draw p{font-size: 20px;}
    }
    .web .sec .step1 .pic_2 img{width: 40%;}
}
//wi6p
@media (min-height:668px) and (max-height:672px){
     .homepage{
         .snow4{width: l(70);top: 100px;}
        .star{top: 100px;}
        .tree{margin-top: 159px;}
        .decorate{top: 380px;}
        .bingo{top:540px}
        .tie{top: 523px;}
        .title1{top: 428px;}
        .title2{top: 485px;}
        .draw{top: 590px;}
        .draw p{font-size: 30px;}
    }
    .web .sec .step1 .pic_3{padding-top: 40px;}
    .web .sec .step1 .pic_2 img{width: 43%;}
    .web .sec .step2 .relation3 img{width: 70%;}
}
//iphone6plus
@media (min-height:673px) and (max-height:736px){
    .homepage{
        .star{top: 162px;}
        .tree{margin-top: 220px;}
        .decorate{top: 442px;}
        .bingo{top:605px}
        .tie{top: 578px;}
        .title1{top: 492px;}
        .title2{top: 550px;}
        .draw{top: 650px;}
        .draw p{font-size: 30px;}
    }
    .web .hea .on_off .music{width: 80%;}
    .web .explain{width: 360px;height: 480px;}
    .web .sec .step3 .rela3 img{width: 70%;}
}

@keyframes solo{
    from{transform: rotate(0deg);}
    to{transform: rotate(360deg);}
}